<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src = 'jquery/jquery-1.12.4.min.js'></script>
    <title>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .aaover{
            background-color: #ff6d66;
            font-size: 22px;
        }
        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
    <script>
        var menu = [
            {id:'1',pid:'0',name:'HTML'},
            {id:'2',pid:'1',name:'html',url:'html/htmla.html'},
            {id:'3',pid:'1',name:'frameset',url:'html/frameset.html'},
            {id:'4',pid:'1',name:'frame',url:'html/frame.html'},
            {id:'5',pid:'1',name:'iframe',url:'html/iframe.html'},
            {id:'6',pid:'1',name:'br',url:'html/br.html'},
            {id:'7',pid:'1',name:'hr',url:'html/hr2.html'},
            {id:'8',pid:'1',name:'pre',url:'html/pre.html'},
            {id:'9',pid:'1',name:'img',url:'html/img.html'},
            {id:'10',pid:'1',name:'a',url:'html/a.html'},
            {id:'11',pid:'1',name:'h3',url:'html/h1-h6bq.html'},
            {id:'12',pid:'1',name:'p',url:'html/pbq.html'},
            {id:'13',pid:'1',name:'span',url:'html/spanbq.html'},
            {id:'14',pid:'1',name:'div',url:'html/div.html'},
            {id:'15',pid:'1',name:'ul',url:'html/lbbq.html'},
            {id:'16',pid:'1',name:'table',url:'html/bg.html'},
            {id:'17',pid:'1',name:'form',url:'html/bd.html'},
            {id:'18',pid:'1',name:'样式标签',url:'html/ysbq.html'},
            {id:'19',pid:'1',name:'热点地图',url:'html/rddt.html'},
            {id:'20',pid:'0',name:'CSS'},
            {id:'21',pid:'20',name:'样式表',url:'html/YSB.html'},
            {id:'22',pid:'20',name:'全局选择器',url:'html/qjxzq.html'},
            {id:'23',pid:'20',name:'标签选择器',url:'html/bqxzq.html'},
            {id:'24',pid:'20',name:'类选择器',url:'html/lxzq.html'},
            {id:'25',pid:'20',name:'ID选择器',url:'html/idxzq.html'},
            {id:'26',pid:'20',name:'分组选择器',url:'html/fzxzq.html'},
            {id:'27',pid:'20',name:'后代选择器',url:'html/hdxzq.html'},
            {id:'28',pid:'20',name:'文本样式',url:'html/sxxzq.html'},
            {id:'29',pid:'20',name:'伪类样式',url:'html/wlys.html'},
            {id:'30',pid:'20',name:'背景',url:'html/bj.html'},
            {id:'31',pid:'0',name:'JAVASCRIPT'},
            {id:'32',pid:'31',name:'JS概念 组成部分'},
            {id:'33',pid:'31',name:'声明变量及变量类型',url:'jshomework/var.html'},
            {id:'34',pid:'31',name:'声明自定义对象',url:'jshomework/varff.html'},
            {id:'35',pid:'31',name:'逻辑语法'},
            {id:'36',pid:'35',name:'if',url:'jshomework/if.html'},
            {id:'37',pid:'35',name:'if else',url:'jshomework/if else.html'},
            {id:'38',pid:'35',name:'if else if',url:'jshomework/if else if.html'},
            {id:'39',pid:'35',name:'for',url:'jshomework/for.html'},
            {id:'40',pid:'35',name:'while',url:'jshomework/while.html'},
            {id:'41',pid:'35',name:'do whlie',url:'jshomework/do whlie.html'},
            {id:'42',pid:'35',name:'switch',url:'jshomework/switch.html'},
            {id:'43',pid:'31',name:'内置对象'},
            {id:'44',pid:'43',name:'window'},
            {id:'45',pid:'44',name:'alert',url:'jshomework/alert.html'},
            {id:'46',pid:'44',name:'prompt',url:'jshomework/prompt.html'},
            {id:'47',pid:'44',name:'confirm',url:'jshomework/confirm.html'},
            {id:'48',pid:'44',name:'open',url:'jshomework/open.html'},
            {id:'50',pid:'44',name:'setTimeout',url:'jshomework/setTimeout.html'},
            {id:'51',pid:'44',name:'setInterval',url:'jshomework/setInterval.html'},
            {id:'52',pid:'43',name:'document',url:'jshomework/document.html'},
            {id:'53',pid:'43',name:'history'},
            {id:'54',pid:'53',name:'forward',url:'jshomework/forward.html'},
            {id:'55',pid:'53',name:'back',url:'jshomework/back.html'},
            {id:'56',pid:'53',name:'go',url:'jshomework/go.html'},
            {id:'57',pid:'43',name:'Data'},
            {id:'58',pid:'57',name:'getFullyear',url:'jshomework/getFullyear.html'},
            {id:'59',pid:'57',name:'setFullyear',url:'jshomework/setFullyear.html'},
            {id:'60',pid:'57',name:'getMonth',url:'jshomework/getMonth.html'},
            {id:'61',pid:'57',name:'setMonth',url:'jshomework/setMonth.html'},
            {id:'62',pid:'57',name:'getdate',url:'jshomework/getdate.html'},
            {id:'63',pid:'57',name:'setdate',url:'jshomework/setdate.html'},
            {id:'64',pid:'57',name:'getday',url:'jshomework/getday.html'},
            {id:'65',pid:'57',name:'getHours',url:'jshomework/gethour.html'},
            {id:'66',pid:'57',name:'setHours',url:'jshomework/setHours.html'},
            {id:'67',pid:'57',name:'getminute',url:'jshomework/getminute.html'},
            {id:'68',pid:'57',name:'setMinutes',url:'jshomework/setMinutes.html'},
            {id:'69',pid:'57',name:'getSecond',url:'jshomework/getSeconds.html'},
            {id:'70',pid:'57',name:'setSeconds',url:'jshomework/setSeconds.html'},
            {id:'71',pid:'57',name:'getMilliseconds',url:'jshomework/getMilliseconds.html'},
            {id:'72',pid:'57',name:'setMilliseconds',url:'jshomework/setMilliseconds.html'},
            {id:'73',pid:'43',name:'location'},
            {id:'74',pid:'73',name:'href',url:'jshomework/href.html'},
            {id:'75',pid:'73',name:'hostname',url:'jshomework/hostname.html'},
            {id:'76',pid:'73',name:'pathname',url:'jshomework/pathname.html'},
            {id:'77',pid:'73',name:'port',url:'jshomework/port.html'},
            {id:'78',pid:'73',name:'protocol',url:'jshomework/protocol.html'},
            {id:'79',pid:'43',name:'screen'},
            {id:'80',pid:'79',name:'availWidth',url:'jshomework/availWidth.html'},
            {id:'81',pid:'79',name:'availHeight',url:'jshomework/availHeight.html'},
            {id:'82',pid:'79',name:'width',url:'jshomework/width.html'},
            {id:'83',pid:'79',name:'height',url:'jshomework/height.html'},
            {id:'84',pid:'79',name:'colorDepth',url:'jshomework/colorDepth.html'},
            {id:'85',pid:'43',name:'math'},
            {id:'86',pid:'85',name:'max',url:'jshomework/max.html'},
            {id:'87',pid:'85',name:'min',url:'jshomework/min.html'},
            {id:'88',pid:'85',name:'abs',url:'jshomework/abs.html'},
            {id:'89',pid:'85',name:'floor',url:'jshomework/floor.html'},
            {id:'90',pid:'85',name:'ceil',url:'jshomework/ceil.html'},
            {id:'91',pid:'43',name:'string'},
            {id:'92',pid:'91',name:'substr',url:'jshomework/substr.html'},
            {id:'93',pid:'91',name:'indexOf',url:'jshomework/indexOf.html'},
            {id:'94',pid:'91',name:'concat',url:'jshomework/concat.html'},
            {id:'95',pid:'91',name:'split',url:'jshomework/split.html'},
            {id:'96',pid:'91',name:'charAt',url:'jshomework/charAt.html'},
            {id:'97',pid:'91',name:'charCodeAt',url:'jshomework/charCodeAt.html'},
            {id:'98',pid:'91',name:'startsWith',url:'jshomework/startsWith.html'},
            {id:'99',pid:'91',name:'endsWith',url:'jshomework/endsWith.html'},
            {id:'100',pid:'43',name:'array'},
            {id:'101',pid:'100',name:'length',url:'jshomework/length.html'},
            {id:'102',pid:'100',name:'join',url:'jshomework/join.html'},
            {id:'103',pid:'100',name:'push',url:'jshomework/push.html'},
            {id:'104',pid:'100',name:'pop',url:'jshomework/pop.html'},
            {id:'105',pid:'100',name:'sort',url:'jshomework/sort.html'},
            {id:'106',pid:'100',name:'shift',url:'jshomework/shift.html'},
            {id:'107',pid:'100',name:'unshift',url:'jshomework/unshift.html'},
            {id:'108',pid:'100',name:'slice',url:'jshomework/slice.html'},
            {id:'109',pid:'100',name:'splice',url:'jshomework/splice.html'},
            {id:'110',pid:'100',name:'reverse',url:'jshomework/reverse.html'},
            {id:'111',pid:'43',name:'cookie',url:'jshomework/cookie.html'},
            {id:'112',pid:'43',name:'',url:''},
            {id:'113',pid:'112',name:'onclick',url:'jshomework/onclick.html'},
            {id:'114',pid:'112',name:'ondblclick',url:'jshomework/ondblclick.html'},
            {id:'115',pid:'112',name:'onresize',url:'jshomework/onresize.html'},
            {id:'116',pid:'112',name:'onfocus',url:'jshomework/onfocus.html'},
            {id:'117',pid:'112',name:'onblur',url:'jshomework/onblur.html'},
            {id:'118',pid:'112',name:'onload',url:'jshomework/onload.html'},
            {id:'119',pid:'112',name:'onunload',url:'jshomework/onunloand.html'},
            {id:'120',pid:'112',name:'onsubmit',url:'jshomework/onsubmit.html'},
            {id:'121',pid:'112',name:'onchange',url:'jshomework/onchange.html'},
            {id:'122',pid:'112',name:'onkeyup',url:'jshomework/onkeyup.html'},
            {id:'123',pid:'112',name:'onkeydown',url:'jshomework/onkeydown.html'},
            {id:'124',pid:'112',name:'onkeypress',url:'jshomework/onkeypress.html'},
            {id:'125',pid:'112',name:'onmouseup',url:'jshomework/onmouseup.html'},
            {id:'126',pid:'112',name:'onmousedown',url:'jshomework/onmousedown.html'},
            {id:'127',pid:'112',name:'onmousemove',url:'jshomework/onmousemove.html'},
            {id:'128',pid:'112',name:'onmouseover',url:'jshomework/onmouseover.html'},
            {id:'129',pid:'112',name:'onmouseout',url:'jshomework/onmouseout.html'},
            {id:'130',pid:'112',name:'onmouseenter',url:'jshomework/onmouseenter.html'},
            {id:'131',pid:'112',name:'onmouseleave',url:'jshomework/onmouseleave.html'},
            {id:'132',pid:'31',name:'JS作业'},
            {id:'133',pid:'132',name:'图形打印',url:'jshomework/one.html'},
            {id:'134',pid:'132',name:'页签',url:'jshomework/yq.html'},
            {id:'135',pid:'132',name:'表格',url:'jshomework/test3.html'},
            {id:'136',pid:'132',name:'表格jq',url:'jquery/test3a.html'},
            {id:'137',pid:'132',name:'窗口',url:'jshomework/hmwin.html'},
            {id:'138',pid:'132',name:'漂浮的广告',url:'center.html'},
            {id:'139',pid:'132',name:'好友黑名单',url:'jshomework/move.html'},
            {id:'140',pid:'132',name:'时间',url:'jshomework/tt.html'},
            {id:'141',pid:'132',name:'图片轮播',url:'jshomework/marquee.html'},
            {id:'142',pid:'132',name:'省份/市县/区域',url:'jshomework/jsonprovince.html'},
            {id:'143',pid:'132',name:'表单的验证',url:'homework/hyxx.html'},
            {id:'144',pid:'132',name:'COOKIE操作',url:'jshomework/cookie.html'},
            {id:'145',pid:'132',name:'拖拽移动',url:'note/onmousemove.html'},
            {id:'146',pid:'0',name:'JQUERY'},
            {id:'147',pid:'146',name:'选择器'},
            {id:'148',pid:'147',name:'id',url:'jquery/JQid.html'},
            {id:'149',pid:'147',name:'element',url:'jquery/JQelement.html'},
            {id:'150',pid:'147',name:'class',url:'jquery/JQclass.html'},
            {id:'151',pid:'147',name:'parent > child',url:'jquery/JQparent.html'},
            {id:'152',pid:'147',name:'even',url:'jquery/JQeven.html'},
            {id:'153',pid:'147',name:'odd',url:'jquery/JQodd.html'},
            {id:'154',pid:'147',name:'first',url:'jquery/JQfirstA.html'},
            {id:'155',pid:'147',name:'last',url:'jquery/JQlastA.html'},
            {id:'156',pid:'147',name:'eq',url:'jquery/JQeqA.html'},
            {id:'157',pid:'147',name:'gt',url:'jquery/JQgt.html'},
            {id:'158',pid:'147',name:'lt',url:'jquery/JQlt.html'},
            {id:'159',pid:'147',name:'attribute',url:'jquery/JQattribute.html'},
            {id:'160',pid:'147',name:'attribute=value',url:'jquery/JQattribute=.html'},
            {id:'161',pid:'147',name:'attribute!=value',url:'jquery/JQattribute!.html'},
            {id:'162',pid:'147',name:'attribute!=value',url:'jquery/JQattribute!.html'},
            {id:'163',pid:'147',name:'attribute^=value',url:'jquery/JQattribute%5E.html'},
            {id:'164',pid:'147',name:'attribute$=value',url:'jquery/JQattribute$.html'},
            {id:'165',pid:'147',name:'attribute*=value',url:'jquery/JQattributeX.html'},
            {id:'166',pid:'147',name:'text',url:'jquery/JQtextA.html'},
            {id:'167',pid:'147',name:'radio',url:'jquery/JQradio.html'},
            {id:'168',pid:'147',name:'checkbox',url:'jquery/JQcheckedbox.html'},
            {id:'169',pid:'147',name:'disabled',url:'jquery/JQdisabled.html'},
            {id:'170',pid:'147',name:'checked',url:'jquery/JQchecked.html'},
            {id:'171',pid:'147',name:'selected',url:'jquery/JQselected.html'},
            {id:'172',pid:'146',name:'属性'},
            {id:'173',pid:'172',name:'attr',url:'jquery/JQattr.html'},
            {id:'174',pid:'172',name:'prop',url:'jquery/JQprop.html'},
            {id:'175',pid:'172',name:'addClass',url:'jquery/JQclassA.html'},
            {id:'176',pid:'172',name:'html',url:'jquery/JQhtmlA.html'},
            {id:'177',pid:'172',name:'text',url:'jquery/JQtext.html'},
            {id:'178',pid:'172',name:'val',url:'jquery/JQval.html'},
            {id:'179',pid:'146',name:'筛选'},
            {id:'180',pid:'179',name:'eq',url:'jquery/JQeq.html'},
            {id:'181',pid:'179',name:'first',url:'jquery/JQfirst.html'},
            {id:'182',pid:'179',name:'last',url:'jquery/JQlast.html'},
            {id:'183',pid:'179',name:'hasClass',url:'jquery/JQhasClass.html'},
            {id:'184',pid:'179',name:'next',url:'jquery/JQnext.html'},
            {id:'185',pid:'179',name:'prev',url:'jquery/JQprev.html'},
            {id:'186',pid:'179',name:'parent',url:'jquery/JQparentA.html'},
            {id:'187',pid:'179',name:'childen',url:'jquery/JQchilden.html'},
            {id:'188',pid:'179',name:'siblings',url:'jquery/JQsiblings.html'},
            {id:'189',pid:'179',name:'contents',url:'jquery/JQcontents.html'},
            {id:'190',pid:'146',name:'event'},
            {id:'191',pid:'190',name:'ready',url:'jquery/JQready.html'},
            {id:'192',pid:'190',name:'blur',url:'jquery/JQblur.html'},
            {id:'193',pid:'190',name:'change',url:'jquery/JQchange.html'},
            {id:'194',pid:'190',name:'click',url:'jquery/JQclick.html'},
            {id:'195',pid:'190',name:'dblclick',url:'jquery/JQdblclick.html'},
            {id:'196',pid:'190',name:'error',url:'jquery/JQerror.html'},
            {id:'197',pid:'190',name:'focus',url:'jquery/JQfocus.html'},
            {id:'198',pid:'190',name:'keydown',url:'jquery/JQkeydown.html'},
            {id:'199',pid:'190',name:'keypress',url:'jquery/JQkeypress.html'},
            {id:'200',pid:'190',name:'keyup',url:'jquery/JQkeyup.html'},
            {id:'201',pid:'190',name:'mousedown',url:'jquery/JQmousedown.html'},
            {id:'202',pid:'190',name:'mouseenter',url:'jquery/JQmouseenter.html'},
            {id:'203',pid:'190',name:'mouseleave',url:'jquery/JQmouseleave.html'},
            {id:'204',pid:'190',name:'mousemove',url:'jquery/JQmousemove.html'},
            {id:'205',pid:'190',name:'mouseout',url:'jquery/JQmouseout.html'},
            {id:'206',pid:'190',name:'mouseup',url:'jquery/JQmouseup.html'},
            {id:'207',pid:'190',name:'resize',url:'jquery/JQresize.html'},
            {id:'208',pid:'190',name:'scroll',url:'jquery/JQscroll.html'},
            {id:'209',pid:'190',name:'load',url:'jquery/JQload.html'},
            {id:'210',pid:'146',name:'CSS'},
            {id:'211',pid:'210',name:'css',url:'jquery/JQcss.html'},
            {id:'212',pid:'210',name:'width',url:'jquery/JQwidth.html'},
            {id:'213',pid:'210',name:'height',url:'jquery/JQheight.html'},
            {id:'214',pid:'210',name:'offset',url:'jquery/JQoffset.html'},
            {id:'215',pid:'210',name:'scrollTop',url:'jquery/JQscrollTop.html'},
            {id:'216',pid:'210',name:'scrollLeft',url:'jquery/JQscrollLeft.html'},
            {id:'217',pid:'146',name:'效果'},
            {id:'218',pid:'217',name:'show',url:'jquery/JQshow.html'},
            {id:'219',pid:'217',name:'hide',url:'jquery/JQhide.html'},
            {id:'220',pid:'217',name:'toggle',url:'jquery/JQtoggle.html'},
            {id:'221',pid:'217',name:'slideDown',url:'jquery/JQslideDown.html'},
            {id:'222',pid:'217',name:'slideUp',url:'jquery/JQslideUp.html'},
            {id:'223',pid:'217',name:'slideToggle',url:'jquery/JQslideToggle.html'},
            {id:'224',pid:'217',name:'fadeIn',url:'jquery/JQfadeIn.html'},
            {id:'225',pid:'217',name:'fadeOut',url:'jquery/JQfadeOut.html'},
            {id:'226',pid:'217',name:'fadeToggle',url:'jquery/JQfadeToggle.html'},
            {id:'227',pid:'217',name:'aniamte',url:'jquery/JQaniamte.html'},
            {id:'228',pid:'217',name:'stop',url:'jquery/JQstop.html'},
            {id:'229',pid:'217',name:'delay',url:'jquery/JQdelay.html'},
            {id:'230',pid:'146',name:'常用方法'},
            {id:'231',pid:'230',name:'each',url:''},
            {id:'232',pid:'230',name:'size',url:''},
            {id:'233',pid:'230',name:'length',url:''},
            {id:'234',pid:'230',name:'data',url:''},
            {id:'235',pid:'230',name:'removeData',url:''},
            {id:'236',pid:'146',name:'文档处理'},
            {id:'237',pid:'236',name:'append',url:''},
            {id:'238',pid:'236',name:'appendTo',url:''},
            {id:'239',pid:'236',name:'prepend',url:''},
            {id:'240',pid:'236',name:'prependTo',url:''},
            {id:'241',pid:'236',name:'after',url:''},
            {id:'242',pid:'236',name:'before',url:''},
            {id:'243',pid:'236',name:'insertAfter',url:''},
            {id:'244',pid:'236',name:'insertBefore',url:''},
            {id:'245',pid:'236',name:'wrap',url:''},
            {id:'246',pid:'236',name:'wrapAll',url:''},
            {id:'247',pid:'236',name:'wrapInner',url:''},
            {id:'248',pid:'236',name:'empty',url:''},
            {id:'249',pid:'236',name:'remove',url:''},
            {id:'250',pid:'236',name:'clone',url:''},
            {id:'251',pid:'146',name:'工具'},
            {id:'252',pid:'251',name:'each',url:''},
            {id:'253',pid:'251',name:'extend',url:''},
            {id:'254',pid:'251',name:'grep',url:''},
            {id:'255',pid:'251',name:'map',url:''},
            {id:'256',pid:'251',name:'inArray',url:''},
            {id:'257',pid:'251',name:'merge',url:''},
            {id:'258',pid:'251',name:'contains',url:''},
            {id:'259',pid:'251',name:'isArray',url:''},
            {id:'260',pid:'251',name:'trim',url:''},
            {id:'261',pid:'0',name:'HOMEWORK'},
            {id:'262',pid:'261',name:'商品信息',url:'homework/spxx.html'},
            {id:'263',pid:'261',name:'会员信息',url:'homework/hyxx.html'},
            {id:'264',pid:'261',name:'单元格',url:'homework/dyg.html'},
            {id:'265',pid:'261',name:'百度',url:'homework/baidu.html'},
            {id:'266',pid:'261',name:'显示总结',url:'homework/xszj.html'},
            {id:'267',pid:'261',name:'涉外官网',url:'homework/sw.html'},
            {id:'268',pid:'261',name:'商城项目'},
            {id:'269',pid:'268',name:'商城首页',url:'homework/scxm.html'},
            {id:'271',pid:'268',name:'商城分类',url:'homework/spfl.html'},
            {id:'272',pid:'268',name:'商城明细',url:'homework/scmx.html'},
            {id:'273',pid:'268',name:'购物车',url:'homework/gwc.html'},
            {id:'274',pid:'268',name:'下单配送地址',url:'homework/xdpsdz.html'},
            {id:'275',pid:'268',name:'支付',url:'homework/zf.html'},
            {id:'276',pid:'268',name:'商城帮助中心',url:'homework/scbzzx.html'},
            {id:'277',pid:'0',name:'EXAM'},
            {id:'278',pid:'277',name:'1',url:'jshomework/arraysum.html'},
            {id:'279',pid:'277',name:'2',url:'jshomework/Select function.html'},
            {id:'280',pid:'277',name:'信息管理',url:'jshomework/Implementation.html'},
            {id:'281',pid:'277',name:'分页原理',url:'jshomework/page.html'},
            {id:'282',pid:'277',name:'老师分页',url:'jshomework/category.html'},
            {id:'283',pid:'0',name:'插件作业',url:''}
        ];

        jQuery(function ($) {

            var top = $('#_top'),left = $('#_left'),right = $('#_right');

            $(window).resize(function () {
                var _width = document.documentElement.clientWidth;
                var _height = document.documentElement.clientHeight;
                left.width(250).height(_height - top.outerHeight());
                right.width(_width - left.outerWidth()).height(left.height());

            });
            $(window).resize();

            var _ = [];
            $.each(menu,function (i,o) {
                _.push('<p id = "');
                _.push(o.id);
                _.push('" pid = "');
                _.push(o.pid);
                _.push('"');
                if(o.url){
                    _.push(' url = "');
                    _.push(o.url);
                    _.push('"');
                }
                  
                _.push('style = "display:none;cursor:pointer" margin = "15px 0 " title = "');
                _.push(o.name);
                _.push('">');
                _.push(o.name);
                _.push('</p>');
            });

            //菜单添加到left区域
            var me = $('#_left').css({padding:0}).append(_.join(''));

            //菜单装载页面功能
            $('p[url]',me).click(function () {

                $('#_right').load($(this).attr('url') + '?ram=' + Math.random());
            });
            //展示第一层级的菜单
            $('p[pid = 0]',me).show();

            //菜单的鼠标样式
            var menus = $('p',me);
            menus.hover(function () {$(this).addClass('aaover');}, function () {$(this).removeClass('aaover')});

            //菜单的收展功能
            menus.click(function () {
               var id = $(this).attr('id');
               var chlid = $('p[pid="' + id +'"]');
               var _textIndent = parseInt($(this).css('textIndent'));
               chlid.css({textIndent:(_textIndent + 20) + 'px'}).toggle();
            });
        });
    </script>
</head>
<body>
<div id="_top" style="height: 100px;border-bottom: 1px solid #c8c8c8"></div>
<div id="_left" style="overflow:auto;float: left;width: 150px;border-right: 1px solid #c8c8c8"></div>
<div id="_right" style="overflow:auto;float: left"></div>
</body>
</html>